const { ref, onMounted } = Vue;
const ElementPlus = window.ElementPlus;

export default {
  components: { ...ElementPlus },
  props: {
    title: { type: String, required: true }
  },
  template: `
  <div class="parallelogram header-outer">
    <el-row>
      <el-col :span="7" style="padding-left: 35px;">
        <img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" />
      </el-col>
      <el-col :span="10" class="header-title">
        <div class="parallelogram header-inner">
          {{title}}
        </div>
      </el-col>
      <el-col :span="7" class="currentTime" style="padding-right: 35px;font-size: 18px;">
        {{currentTime}}
      </el-col>
    </el-row>
  </div>
  `,
  setup(props) {
    const currentTime = ref('');
    const title = props.title;
    onMounted(async () => {
      let incrementNumber = () => {
        setTimeout(incrementNumber, 500);
        currentTime.value = dayjs().format('YYYY年MM月DD日  HH:mm:ss');
      }
      setTimeout(incrementNumber, 500);
    });

    return {
      currentTime, title
    }
  },
};